<template>
  <view>
    <view class="header-bg">
      <view :style="{height: safeTop + 'px'}"></view>
      <view class="flex-block" style="padding: 20px;">
        <view class="avatar">
          <up-image :src="userInfo.avatar" shape="circle" width="136rpx" height="136rpx" />
        </view>
        <view class="content">
          <view class="title">
            <up-text :text="userInfo.nickName" :color="$u.color.lightColor" />
          </view>
          <view
            class="u-warning txt-small u-m-t-10"
            v-if="userInfo.nickName == '微信用户' || !userInfo.avatar"
            @click="updateProfile"
          >完善资料，体验更多功能>>></view>
        <view class="sub-title u-m-t-20">{{ userInfo.phone }}</view>
        </view>
      </view>

      <view class="u-p-40">
        <view class="flex-block flex-between">
          <u-row>
            <up-text text="账户余额:" :color="$u.color.lightColor" />
            <text class="txt-large u-warning-dark">￥{{ allCoin }}</text>
          </u-row>
          <view>
            <u-button :color="$u.color.warning" type="info" @click="toRecharge" size="small" plain style="background: transparent;">充值</u-button>
          </view>
        </view>
      </view>
    </view>

    <view class="cell-item">
      <up-cell title="订单" isLink url="/pages/order/order">
        <template #icon>
          <uni-icons customPrefix="iconfont" type="icon-newshot" :color="$u.color.main" size="22px"></uni-icons>
        </template>
        <template #value>
          <view style="text-align: right;">
            <up-text :size="13" :color="$u.color.lightColor" text="购买商品订单状态"></up-text>
          </view>
        </template>
      </up-cell>
    </view>
    <view class="cell-item">
      <up-cell title="地址" isLink url="/pages/address/address">
        <template #icon>
          <uni-icons customPrefix="iconfont" type="icon-location" :color="$u.color.main" size="22px"></uni-icons>
        </template>
        <template #value>
          <view style="text-align: right;">
            <up-text :size="13" :color="$u.color.lightColor" text="添加收货地址"></up-text>
          </view>
        </template>
      </up-cell>
    </view>
    <view class="cell-item">
      <up-cell title="售后" isLink url="/pages/contact/contact">
        <template #icon>
          <uni-icons customPrefix="iconfont" type="icon-phone" :color="$u.color.main" size="22px"></uni-icons>
        </template>
        <template #value>
          <view style="text-align: right;">
            <up-text :size="13" :color="$u.color.lightColor" text="售后联系方式"></up-text>
          </view>
        </template>
      </up-cell>
    </view>
    <view class="cell-item">
      <up-cell title="我的推荐码" isLink url="/pages/invite/invite">
        <template #icon>
          <uni-icons customPrefix="iconfont" type="icon-qrcode" :color="$u.color.main" size="20px"></uni-icons>
        </template>
        <template #value>
          <view style="text-align: right;">
            <up-text :size="13" :color="$u.color.lightColor" text="邀请新用户即可获得奖励"></up-text>
          </view>
        </template>
      </up-cell>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onActivated, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import cache from '@/utils/cached'
import { order } from '@/utils/api'
import * as $u from "uview-plus";
const sysInfo: any = uni.getSystemInfoSync()
const safeTop: number = sysInfo.safeArea.top + 30;
const userInfo = ref({})
const allCoin = ref(0)

onMounted(() => {
  console.log($u)
  userInfo.value = cache.getUserInfo() || {};
  getwallet()
})
onShow(() => {
  userInfo.value = cache.getUserInfo() || {};
})

const toRecharge = () => {
  uni.navigateTo({
    url: '/pages/recharge/recharge'
  })
}

const updateProfile = () => {
  uni.navigateTo({
    url: '/pages/update-profile/update-profile'
  })
}


async function getwallet() {
  const { data } = await order.wallet()
  allCoin.value = data.coin;
}
</script>

<style lang="stylus" scoped>
  .avatar
    height 136rpx
    width 136rpx
    border-radius: 12px
    background: #f3f3f3
    overflow hidden
  .content
    padding-left 20px
    .title
      font-size 18px
    .sub-title
      font-size 14px
      color #777
  .member-card
    background: #1B2228
    color #ffffff
    padding 10px 20px
    border-radius: 8px

  .cell-item
    margin 20px
    background: #ffffff
    border: 1rpx solid #eeeeee
    border-radius: 8px
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08)

  .header-bg
    background: #1B2228
    position relative
    z-index 1
    &::after
      background: linear-gradient(45deg, rgba(255,255,255, 0) 50%, rgba(255,255,255,.05) 50%)
      background-size: 8px 8px
      content: ""
      position absolute
      left 0
      top 0
      bottom 0
      right 0
      z-index -1
</style>